<template>
    <div>
        <s-button :icon="getIcon(state.status)" :type="getColor(state.status)" class="mr" @click="openFactory" :disabled="Boolean(state.status)">{{state.status?'工厂测试已开启':'开启工厂测试'}}</s-button>
        <s-button :icon="getIcon(state.device)" :type="getColor(state.device)" class="mr" name="device" :value="Boolean(state.device)" @click="update">{{state.device?'取消':'开启'}}煲机测试</s-button>
        <s-button :icon="getIcon(state.usb)" :type="getColor(state.usb)" class="mr" name="usb" :value="Boolean(state.usb)" @click="update">{{state.usb?'取消':'开启'}}U盘测试</s-button>
    </div>
    <div class="cmd">
        <s-input placeholder="命令行" name="cmd" :value="state.cmd" :input-style="{width:'400px'}" class="ib mr" @update="updateCmd"/>
        <s-button @click="handleCmd">提交</s-button>
    </div>
    <textarea name="" id="" cols="140" rows="26" :value="state.result"></textarea>
</template>
<script lang="ts" setup>
import { SButton, SInput, Message } from "@/components"
import { reactive, computed, onBeforeMount, onBeforeUnmount } from "vue"
import { doTest, doCmd, getTestStatus } from "@/request"
import { Timer } from "@/utils"

interface Test{
    device:number,
    usb: number,
    status: number,
}
interface State extends Test{
    cmd:string,
    result: string
}
type Params={name:keyof Test, value:boolean}

// 调试操作
enum TEST_TYPE{
   CANCEL_FACTORY,
   OPEN_FACTORY,
   OPEN_DEVICE,
   CANCEL_DEVICE,
   OPEN_USB,
   CANCEL_USB
}

// 状态
const state = reactive<State>({
   device: 1,
   usb: 0,
   status: 1,
   cmd: "",
   result: ""
})

// 刷新状态
const refreshStatus = () => {
   getTestStatus().then((data) => {
      if (data) {
         state.device = data.device
         state.usb = data.usb
         state.status = data.status
      }
   })
}

// 初始化状态
onBeforeMount(() => {
   refreshStatus()
   Timer.refreshDebug = setInterval(() => {
      refreshStatus()
   }, 3000)
})

onBeforeUnmount(() => {
   clearInterval(Timer.refreshDebug)
})

const getIcon = computed(() => (status:number) => {
   return status ? "icon-stop-fill" : "icon-play-fill"
})
const getColor = computed(() => (status:number) => {
   return status ? "success" : "primary"
})
const getParamType = (params:Params) => {
   return (params.value ? "OPEN_" : "CANCEL_") + params.name.toUpperCase() as keyof typeof TEST_TYPE
}

const updateCmd = (params) => {
   state[params.name] = params.value
}

// 更新状态
const update = (params:Params) => {
   const type = TEST_TYPE[getParamType(params)]
   doTest({
      factorytest: type
   }).then((data) => {
      if (data) {
         refreshStatus()
         Message.success("下发成功")
      }
   })
}

// 开启工厂
const openFactory = () => {
   doTest({
      factorytest: 1
   }).then((data) => {
      if (data) {
         refreshStatus()
         Message.success("下发成功")
      }
   })
}

const handleCmd = () => {
   doCmd({
      cmd: state.cmd
   }).then((data) => {
      if (data) {
         state.result = data.content
      }
   })
}

</script>
<style lang="less" scoped>
.cmd{
    margin: @itemSpace 0;
}
</style>
